<template>
  <div id="Choiceness">
    <h2>精选推荐菜谱</h2>
    <ul id="choicnessVessels">
      <li v-for="(item,index) in contents" :key="item.menuId" :class="[(index+1)%3==0?'delLi':'']">
        <router-link :to="{
          name: 'DishDetails',
            params: {
              id: item.menuId
            }
        }">
          <el-avatar class="coverImg" :src="item.menuSrc" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
          <p>{{item.menuName}}</p>
          <div>
            <img class="headerImg" :src="item.headImg" alt="">
            {{item.nickname}}
          </div>
          <div class="heat">
            <span class="view">
              {{Nums(item.doh)}}
            </span>
            <span class="collect">{{Nums(item.collection)}}</span>
          </div>
        </router-link>
      </li>
    </ul>
    <div class="page">
      <el-pagination
        class="pages"
        background
        layout="prev, pager, next"
        :total="pages.total"
        :hide-on-single-page=true
        :current-page="pages.current"
        :pager-count=5
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import cookie from '../../cookien'
export default {
  name: 'Choiceness',
  data () {
    return {
      // 每页的精选菜谱数据
      contents: [
        // {
        //   coverImg: 'https://cp1.douguo.com/upload/caiku/4/8/1/400x266_483fbb6c27d944c2b049f4fff274c481.jpg',
        //   title: '#一口新年味，全家享佳味#奥利奥可可蛋糕卷',
        //   headerImg: 'https://tx1.douguo.com/upload/photo/a/d/4/70_u05875305796750134858.jpg',
        //   nick: '邱邱的厨房日记',
        //   view: 1000001,
        //   collection: 10000000,
        //   id: 6
        // }
      ],
      // 分页
      pages: {
        // 每页十条，共几条
        total: 100,
        // 当前页数
        vals: 1,
        // 自定义第几页
        current: 1
      }
    }
  },
  computed: {
    Nums (value) {
      return (value) => {
        if (value >= 100000000) {
          value = Math.round(value / 10000000) / 10 + '亿'
        } else if (value >= 10000000) {
          value = Math.round(value / 1000000) / 10 + 'kw'
        } else if (value >= 10000) {
          value = Math.round(value / 1000) / 10 + 'w'
        } else if (value >= 1000) {
          value = Math.round(value / 100) / 10 + 'k'
        }
        return value
      }
    }
  },
  methods: {
    errorHandler () {
      return true
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleCurrentChange (val) {
      // 当前页数
      this.pages.vals = val
      this.$axios({
        url: '/Menu/Visitor/findAllMenuByCollection',
        headers: {
          token: cookie.getToken()
        },
        params: {
          pageNow: this.pages.vals,
          pageSize: 12
        }
      }).then(data => {
        if (data.data.code === 200) {
          this.pages.total = data.data.object.total
          this.contents = data.data.object.list
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.$axios({
      url: '/Menu/Visitor/findAllMenuByCollection',
      headers: {
        token: cookie.getToken()
      },
      params: {
        pageNow: 1,
        pageSize: 12
      }
    }).then(data => {
      console.log(data)
      if (data.data.code === 200) {
        this.pages.total = data.data.object.total
        this.contents = data.data.object.list
      }
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style lang="less" scoped>
  a{
    color: black;
  }
  #Choiceness{
    width: 100%;
    h2{
      font-size: 20px;
      color: #333;
      line-height: 20px;
      font-weight: bold;
      margin-bottom: 25px;
    }
    #choicnessVessels{
      overflow: auto;
      list-style: none;
      .delLi{
        margin-right: 0px;
      }
      li{
        float: left;
        position: relative;
        width: 300px;
        height: 255px;
        overflow: hidden;
        margin: 0 40px 40px 0;
        a{
          display: block;
          width: 100%;
          height: 100%;
          text-decoration: none;
          .coverImg{
            width: 300px;
            height: 200px;
            background-size: cover;
            background-position: center;
            vertical-align: bottom;
            border-radius: 8px;
          }
          p{
            font-size: 15px;
            color: #333;
            line-height: 15px;
            padding: 10px 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          div{
            //max-width: 170px;
            vertical-align: middle;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 12px;
            .headerImg{
              width: 20px;
              height: 20px;
              border-radius: 50%;
              vertical-align: bottom;
            }
          }
          .heat{
            position: absolute;
            bottom: 0;
            right: 0;
            .view{
              margin-right: 10px;
              &:before{
                content:'';
                display: inline-block;
                width: 17px;
                height: 12px;
                background: url("../../assets/view2.png");
                vertical-align: middle;
                margin-right: 2px;
                position: relative;
                top: -1px;
              }
            }
            .collect{
              &:before{
                content:'';
                display: inline-block;
                width: 14px;
                height: 13px;
                background: url("../../assets/collect2.png");
                vertical-align: middle;
                margin-right: 2px;
                position: relative;
                top: -1px;
              }
            }
          }
        }
      }
    }
    .pages{
      display: flex;
      justify-content:center;
      flex-wrap:wrap;
    }
  }
</style>
